<template>
	<basic-container>
		<avue-crud :option="option" :data="data" ref="crud" v-model="form" :table-loading="loading" :permission="permissionList"
		@row-del="rowDel"   :page="page" @refresh-change="refreshChange" @search-change="searchChange" @selection-change="selectionChange" @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange"
		@on-load="onLoad">
			<template slot-scope="scope" slot="vipEquity">
				<div class="upload">
					<el-image  fit="contain" :src="scope.row.vipEquity" style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">
						<div slot="error" class="image-slot">
							<div style="color: #999;">暂无权益</div>
						</div>
					</el-image>
				</div>
			</template>
			<template slot-scope="" slot="menuLeft">
				<el-button @click="addNew()" size="mini" type="primary" v-has="'/mall-cloud-distribution/userType/addItem'">新增</el-button>
				<el-button @click="DeleteAll()" size="mini" type="primary" v-has="'/mall-cloud-distribution/userType/delete'">全选删除</el-button>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button @click="edit(scope.row)" size="mini" type="text"> <i class="el-icon-edit" v-has="'/mall-cloud-distribution/userType/editItem'"></i>编辑</el-button>
			</template>
		</avue-crud>
		<!-- 新增和编辑-->
		<el-dialog :title="dialogType==1?'编辑':'新增'"  :wrapperClosable="false" :show-close="false" :visible.sync="drawerNew" :with-header="false" @close='closeDrawer' width="60%">
			<!-- <div class="demo-drawer__header">
				<div class="drawerHeader">
					<strong>{{deawerNewTitle}}</strong>
				</div>
			</div> -->
			<div class="demo-drawer__content">
				<avue-form ref="form" v-model="obj" :option="newOption" @submit="submit">

					<template slot-scope="scope" slot="vipEquity">
						<div class="upload">
							<el-input style="margin-right: 0.2rem;" readonly @focus="uploadbtn()" v-model="obj.vipEquity" placeholder="图片比例：1：1" :clearable='true'
									   />
							<el-image v-if="obj.vipEquity" @click="uploadbtn" fit="contain" :src="obj.vipEquity" style="margin-right: 0.2rem;width: 50px; height: 50px">
							</el-image>
							<el-button size="mini" type="primary" @click="uploadbtn()">上传图片</el-button>
							<p class="tsmsg">最多可上传1张照片</p>
						</div>
					</template>

					<template slot-scope="scope" slot="menuForm">
						<el-button @click="closeDrawer">取消</el-button>
					</template>
				</avue-form>
			</div>
		</el-dialog>
		<selFile ref="selFile" selectType="radio" @callback="selFileCallBack" albumCode="pic_root" dialogTitle="选择图片1"
				 selMaxWidth="500px" selMaxHeight="1280px"></selFile>
	</basic-container>
</template>

<script>
	import selFile from '@/components/file/selFile'
	import {
		getList,
		remove,
		update,
		add,
		removeAll
	} from "@/api/distribution/userType";
	import {
		mapGetters
	} from "vuex";
	import { testIsInteger,validateFormat } from '@/util/util.js';
	export default {
		components: {
			selFile
		},
		data() {
			return {
				drawerNew: false,
				dialogLink: false,
				deawerNewTitle: '新增',
				drawerActivity: false,
				dialogType:0,//0 新增  1编辑
				obj: {},
				ids: [],
				newOption: {
					// size: 'mini',
					submitText: '完成',
					emptyBtn: false,
					labelWidth: '120',
					column: [{
						label: "会员等级",
						prop: "vipLevel",
						fixed: true,
						span:16,
						row:true,
						maxlength: 10,
						rules: [{
							required: true,
							message: "请输入会员级别",
							trigger: "blur"
						},{
							validator: validateFormat,
							trigger: 'blur'
						}]
					},
						{
							label: "积分界限",
							prop: "integraLimit",
							row:true,
							span:16,
							fixed: true,
							maxlength: 8,
							rules: [{
								required: true,
								message: "请输入积分界限",
								trigger: "blur"
							},
							{validator: testIsInteger,trigger: 'blur'}
							]
						},
						{
							label: "会员权益",
							prop: "vipEquity",
							formslot:true,
							fixed: true,
							row:true,
							span:20,
							rules: [{
								required: true,
								message: "请选择会员权益",
								trigger: "change"
							}],
						},]
				},
						form: {},
				query: {},
				data: [],
				loading: true,
				rolesTree: [],
				rolesKeys: [],
				box: false,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					size: 'mini',
					excelBtn: false,
					tip: false,
					border: true,
					index: false,
					"align": "center",
					viewBtn: false,
					selection: true,
					addBtn:false,
					editBtn:false,
					rowKey: 'id',
					height: 'auto',
					// calcHeight: 380,
					dialogType: "dialog",
					menuWidth: 300,
					column: [{
							label: "会员等级",
							prop: "vipLevel",
							fixed: true,

						},
						{
							label: "积分界限",
							prop: "integraLimit",
							sortable: true,

						},
						{
							label: "会员权益",
							prop: "vipEquity",
							slot:true,
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},

					]
				},

			};
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {
					delBtn: this.vaildData(this.permission["/mall-cloud-distribution/userType/delete"], false),
				};
			},
		},

		methods: {
			//新增 打开弹框
			addNew(){
				this.dialogType=0
				this.deawerNewTitle='新增'
				this.drawerNew = true
			},
			//编辑 打开弹框
			edit(data){
				this.dialogType=1
				console.log(data)
				this.obj=data
				this.deawerNewTitle='编辑'
				this.drawerNew = true
			},
			//图片返回数据
			selFileCallBack(obj) {
				this.obj.vipEquity=obj[0]
				console.log(obj)
			},
			//打开选取图片的弹框
			uploadbtn() {
				this.$refs.selFile.open();
			},
			//新增或编辑的确认
			submit(loading, done){
				this.loading=true
				console.log(this.obj)
				if(this.dialogType==0){//新增
					add(this.obj).then((res) => {
						this.loading=false
						this.onLoad(this.page);
						if(res.data.code==200){
							this.$message.success("新增成功!");
						}else{
							this.$message.error(res.data.message);
						}
						this.closeDrawer()
						done();
					}, error => {
						done();
						console.log(error)
					});
				}else {//编辑
					update(this.obj).then((res) => {
						this.loading=false
						this.onLoad(this.page);
						if(res.data.code==200){
							this.$message.success("编辑成功!");
						}else{
							this.$message.error(res.data.message);
						}
						
						this.closeDrawer()
						done();
					}, error => {
						done();
						console.log(error)
					});
				}


			},
			//新增编辑弹框的取消
			closeDrawer() {
				this.drawerNew = false
				this.$refs.form.resetForm();
				this.$nextTick(()=>{
					this.$refs["form"].clearValidate();
				});
			},
			// 设置全选删除
			selectionChange(list) {
				this.ids = this.handleData(list)
			},
			handleData(data) {
				let arr = data.map(item => {
					return item.id.toString()
				})
				return arr
			},
			DeleteAll() {
				console.log(this.ids)
				if (this.ids.length > 0) {
					this.$confirm("确定将选择数据删除?", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}).then(() => {return removeAll(this.ids);}).then((res) => {
							this.onLoad(this.page);
							if (res.data.success) {
								this.$message({type: "success", message: "操作成功!"});
							} else {
								this.$message({type: "error", message: res.data.message});
							}
						})
				} else {
					this.$message.error("至少选择一条数据")
				}
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(row.id);}).then((res) => {
							this.onLoad(this.page);
						if (res.data.success) {
							this.$message({type: "success", message: "操作成功!"});
						} else {
							this.$message({type: "error", message: res.data.message});
						}
					});
			},
			searchReset() {
				this.idList = []
				this.$refs.crud.toggleSelection();
				this.query = {};
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage=1
				this.idList = []
				this.$refs.crud.toggleSelection();
				this.query = params;
				this.onLoad(this.page, params,done);
			},

			currentChange(currentPage) {
				this.page.currentPage = currentPage;
				this.onLoad(this.page)
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.onLoad(this.page)
			},
			refreshChange() {
				this.idList = []
				this.$refs.crud.toggleSelection();
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					this.loading = false;
					const data = res.data;
					if(this.page.currentPage>1&&data.data.length==0){
						this.page.currentPage-=1
						this.onLoad(this.page)
					}
					this.page.total = data.count;
					this.data = data.data;
					if (res.status == 200) {
						this.data = [];
						this.data = res.data.data;
					}
				});
			}
		}
	};
</script>

<style scoped>
	.upload {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text-align: center;
	}
	.tsmsg {
		width: 200px;
		font-size: 10px;
		color: #999;
		margin: 0px;
		padding-left: 10px;
	}
</style>
